<template>
  <div style="margin: 0 -16px -16px;">
    <ees-split-tree-org @change="org = $event">
      <Breadcrumb :items="breadcrumbItems"/>
      <Tab v-model:active-key="tabsKey" lazy-load type="rounded">
        <TabItem key="org" title="下级">
          <children :parentData="org"/>
        </TabItem>
        <TabItem key="role" title="角色">
          <role :parentData="{ refType: 'ORG', refId: org.id, isShowAction: false }"/>
        </TabItem>
        <TabItem key="user" title="用户">
          <user :parentData="org"/>
        </TabItem>
      </Tab>
    </ees-split-tree-org>
  </div>
</template>
<script setup>
import { computed, ref } from "vue";
import Children from './children.vue'
import User from './user/index.vue'
import Role from './role/index.vue'

const tabsKey = ref('org')

const org = ref({})

const breadcrumbItems = computed(() => {
  if (org.value.namesPath) {
    return org.value.namesPath?.split('/')
  } else {
    return []
  }
})

</script>
